<template>
    <div>
        <div class="position-absolute top-0 bottom-0 start-0 end-0" @click="modal = false"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">

                        <input type="text" class="px-4 py-2" autocomplete="off" v-model="state"
                            @focus="modal = true">

                        <div v-if="filteredStates && modal">
                            <ul class="list-group text-align-center">
                                <li v-for="filteredState in filteredStates" v-text="filteredState"
                                    @click="setState(filteredState)" class="list-group-item"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

</template>

<script>
export default {
    mounted() {
        console.log('ClassesComponent mounted.');
        this.filterStates();
    },

    data: () => ({
        state: '',
        states: [
            'Florida',
            'Alabama',
            'Alaska',
            'Texas'
        ],
        modal: false,

        filteredStates: [],
    }),

    methods: {
        filterStates() {
            if (this.filteredStates.length == 0) {
                this.filteredStates = this.states
            }

            this.filteredStates = this.states.filter(state => {
                return state.toLowerCase().startsWith(this.state.toLowerCase())
            })
        },

        setState(state) {
            this.state = state;
            this.modal = false;
        }
    },

    computed: {

    },

    watch: {
        state() {
            this.filterStates();
        }
    }
}
</script>

<style>

</style>